<template>
	<view class="container">
		<web-view :src="url"></web-view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from 'vue';
	import {
		CONFIG
	} from "../../utils/config";
	import {
		userStore
	} from "../../store/userStore.js";

	const store = userStore();
	const url = ref("");

	onLoad((data) => {
		url.value =
			`${CONFIG.goade_line_url}?start=${store.currentPos.longitude},${store.currentPos.latitude}&dest=${data.elon},${data.elat}&destName=${data.name}&key=${CONFIG.gaode_key}&jscode=${CONFIG.gaode_skey}`;
	});
</script>

<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* 使容器高度占满整个视口高度 */
		background-color: #f5f5f5;
		/* 浅灰色背景 */
	}

	web-view {
		width: 100%;
		/* 宽度占满容器 */
		height: 100%;
		/* 高度占满容器 */
		border-radius: 10px;
		/* 圆角边框 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 轻微的阴影效果 */
	}
</style>